<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../css/myOrder/myorder.css">

    <style>

        .form{
            background-color: white;
        }

        .form-body {
            padding-left: 20px;
            padding-top: 20px;
        }

        .btn-1 {
            height: 45px;
            width: 100px;
            background-color: white;
            color: orange;
            border: 1px solid orange;
        }


        .bnt-left {
            margin-right: 10px;
        }
        .bottom-right{
            margin-right: 20px;
        }
        .btns{
            padding-top: 20px;
            text-align: center;
        }
        .btn-bottom{
            padding-bottom: 20px;
        }
        .bootstrap-table{
            text-align: center;
        }
        .bootstrap-table thead{
            background-color: #FFEDDF;
        }

    </style>
</head>
<body>
<div class="tab-pane fade in active body" id="list_order">

    <form role="form">
        <div class="form">
            <div class="row form-body  top">
                <div class="col-lg-5 col-sm-5">
                    <div class="col-lg-6 col-sm-6 ">
                        <select type="text" id="select" class="form-control" onclick="getType()" name=""
                                style="height: 45px">
                            <option>
                        收货公司名称
                        Receiving company name
                            </option>
                            <option>
                        收货公司地址
                        Receiving company address
                            </option>
                        </select>
                    </div>

                    <div class="col-lg-6 col-sm-6">
                        <input type="text" class="form-control" name="" style="height: 45px">
            </div>
                </div>
            </div>
            <div class="row top form-body">
                <div class="col-lg-5 col-sm-7">
                    <div class="col-lg-2 col-sm-3 ">
                        <div>下单时间</div>
                        <div>order time</div>
                    </div>
                    <div class="col-lg-4 col-sm-4">
                        <input class="form-control" type="text" style="height: 45px" name="startTime" id="startTime"
                               onclick="getDate('startTime')">
                    </div>
                    <div class="col-lg-1 col-sm-1 control-label">
                        <div>至</div>
                        <div>to</div>
                    </div>
                    <div class="col-lg-5 col-sm-4">
                        <input class="form-control" type="text" style="height: 45px" name="endTime" id="endTime"
                               onclick="getDate('endTime')">
                    </div>
                </div>
                <div class="col-lg-7 col-sm-5 ">
                    <div class="row pull-right bottom-right">
                        <button class=" col-sm-4 bnt-left btn-1">
                            最近7天
                    </button>
                        <button class=" col-sm-4 btn-1 ">
                            最近30天
                    </button>
                    </div>
                </div>


            </div>
            <div class="row top btn-bottom" >
                <div class="col-lg-5 col-sm-5"></div>
                <div class="col-lg-7 col-sm-7 ">
                    <div class="row pull-right bottom-right" >
                        <button class="col-sm-4 bnt-left btn-2" style="width: 100px">
                            查找Find
                </button>
                        <button class="col-sm-4 btn-2" style="width: 100px">
                            重置Reset
                </button>
                    </div>
                </div>
            </div>

        </div>
    </form>
        <div class="list top form">
            <div class="row top btns">
                <div class="col-lg-11">
                    <div class="col-sm-2 ">
                        <div>全部<br>All</div>
                    </div>
                    <div class="col-sm-2">
                        <div>待处理<br>Pending</div>
                    </div>
                    <div class="col-sm-2">
                        <div>待发货<br>to be delivered</div>
                    </div>
                    <div class="col-sm-2">
                        <div>待评价<br>Be evaluated</div>
                    </div>
                    <div class="col-sm-2">
                        <div>交易成功<br>transaction is successful</div>
                    </div>
                    <div class="col-sm-2">
                        <div>交易关闭<br>Trading closed</div>
                    </div>
                </div>


            </div>
            <div class="top border-bottom"></div>


    <div class="top"></div>
    <table class=" table table-hover table-responsive " id="list_order_table"></table>
        </div>
</div>


</body>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/laydate/laydate.js"></script>
<script src="../../js/myOrder/jquery.layout_and_plugins.min.js"></script>
<script>

    $(function () {
        getlist_order();
        getDate("startTime");
        getDate("endTime");
    })

    /*
     * @description : 获取订单列表
     * @params: 
     * @author : peng huaneng
     * @date : 2018/1/18 10:29
     */
    function getlist_order() {
        $('#list_order_table').bootstrapTableEx({
            // url : '../../sys/user/list?_' + $.now(),
            height: $(window).height() - 54,
            queryParams: function (params) {
                return params;
            },
            columns: [{
                checkbox: true,
                width:"2%"
            }, {
                field: 'num',
                title: '订单编号<br>Order Number',
                formatter: function (value, row, index) {
                    var html = '';
                    html = '<div class="row">' +
                        '<div class="col-lg-3 col-sm-4"><img src="' + row.url + '" style="max-width: 70px;max-height: 70px"></div>' +
                        '<div class="col-lg-9 col-sm-8 row" style="line-height: 35px" > <div class="pull-left">' + row.num + '</div></div>' +
                        '</div>';
                    return html;
                },
                width:"25%"

            }, {
                field: 'consigneeName',
                title: '收货公司名称<br>Consignee name',
                width:"20%"
            }, {
                field: 'orderTime',
                title: '下单时间<br>order time',
                width:"20%"
            }, {
                field: 'phone',
                title: '联系电话<br>contact number',
                width:"20%"
            }, {
                field: 'status',
                title: '交易状态<br>trading status',
                width:"10%"
            }

            ],
            data: [{
                "num": 1218954466,
                "consigneeName": "小伙郎",
                "orderTime": "2017/12/5 15:00",
                "phone": 18568598546,
                "status": "完成",
                "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516185142263&di=a1be9937c6fda0f57c3be427fb7e4992&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201409%2F27%2F20140927111723_yBJuF.jpeg"
            }, {
                "num": 56484514,
                "consigneeName": "维迈",
                "orderTime": "2017/12/5 15:00",
                "phone": 18568598546,
                "status": "完成",
                "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516185142263&di=a1be9937c6fda0f57c3be427fb7e4992&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201409%2F27%2F20140927111723_yBJuF.jpeg"
            }]
        });
    }

    function getDate(location) {
        laydate.render({
            elem: '#'+location ,//指定元素
            type: 'datetime' ,
            trigger: 'click'
        });
    }

</script>
</html>